<!--
    称重退补差价提示框
-->
<template>
    <div class="refund-dialog">
        <div class="tips-wrap" @click.stop="show = true">
            <div class="refund-btn">{{ is_refund_msg }}</div>
            <img class="tips-icon" src="../../assets/refund-icon.png" alt=""/>
        </div>
        <van-popup
			v-model:show="show"
			closeable
            round
            position="bottom"
			:closeOnClickOverlay="false"
            :style="{ height: '30%' }"
            safe-area-inset-bottom
			@click-overlay="show = false"
            get-container="body"
		>
			<div class="refund-container" v-show="show">
				<div class="head">{{ is_refund_msg }}</div>
				<div class="refund-text">
                    <p>针对该商品，到店自取货时门店会核对实际重量，系统会按实际重量收费：</p>
                    <p>如实际重量低于您下单的重量，差额将退回；</p>
                    <p v-if="is_refund_tips == 2">如实际重量高于您下单的重量，您需额外支付补款。</p>
                </div>
				<div class="close">
					<van-button class="refund-close-btn" @click="show = false">我知道了</van-button>
				</div>
			</div>
		</van-popup>
    </div>
</template>

<script>
// import { getMenuScene } from '../../utils/storeCommunityPackage.js';
export default {
    name:'WeighRefundDescription',
    props: {
        is_refund_msg: {
            type: String,
            default: '称重退差价',
        },
        is_refund_tips: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            show: false,
        };
    },
};
</script>

<style lang="scss" scoped>
.refund-dialog {
    .tips-wrap {
        width: 2rem;
        display: flex;
        align-items: center;
        padding-top: .1rem;
        .refund-btn {
            color: #999;
            font-size: .24rem;
            height: .34rem;
            line-height: .34rem;
            padding: 0 .06rem;
        }
        .tips-icon {
            width: 0.24rem;
            height: 0.24rem;
        }
    }
}
.refund-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .32rem;
        color: #333;
        font-weight: 500;
        padding-top: .24rem;
    }
    .refund-text {
        font-size: .28rem;
        padding: 0 .32rem;
        color: #666;
    }
    .close {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.4rem;
        border-top: 0.5px solid #EBEBEB;
        .refund-close-btn {
            width: 90%;
            height: .8rem;
            border-radius: 1rem;
            color: #333;
            font-size: .28rem;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
        }
    }
}
::v-deep .van-popup__close-icon {
    font-size: 16px;
}
</style>
